{% extends 'BudgetBudgetBundle::layout.html.twig' %}

{% block stylesheets %}
    
    {% stylesheets '@BudgetBudgetBundle/Resources/public/css/style.css' filter='cssrewrite' output='bundles/budgetbudget/css/style.css'%}
        <link href="{{ asset_url }}" rel="stylesheet">
    {% endstylesheets %}
    
    {% stylesheets 'bundles/budgetbudget/css/*' filter='cssrewrite' %}
        <link href="{{ asset_url }}" rel="stylesheet">
    {% endstylesheets %}
    
    {% stylesheets 'bundles/budgetbudget/dist-jstree/themes/default/style.min.css' filter='cssrewrite' output='bundles/budgetbudget/dist-jstree/themes/default/style.min.css'%}
        <link href="{{ asset_url }}" rel="stylesheet">
    {% endstylesheets %}
    
    {% stylesheets 'bundles/budgetbudget/css/jquery-ui.css' filter='cssrewrite' output='bundles/budgetbudget/css/jquery-ui.css'%}
        <link href="{{ asset_url }}" rel="stylesheet">
    {% endstylesheets %}
    
    {#{% stylesheets 'bundles/budgetbudget/css/style.css' filter='cssrewrite' output='../bundles/budgetbudget/css/style.css'%}
        <link href="{{ asset_url }}" rel="stylesheet">
    {% endstylesheets %}#}

    {% stylesheets '@BudgetBudgetBundle/Resources/public/jqplot/jquery.jqplot.css' filter='cssrewrite' %}
        <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
    {% endstylesheets %}
    
    {% stylesheets '@BudgetBudgetBundle/Resources/public/scdatetimepicker/css/datetimepicker.css' filter='cssrewrite' %}
        <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
    {% endstylesheets %}
    
{% endblock %}

{% block javascripts %}
    
    {#<script src="//code.jquery.com/ui/1.11.0/jquery-ui.js"></script>#}
    <script src="{{ asset('bundles/budgetbudget/js/jquery/jquery-ui.js') }}"></script>

    {% javascripts '@BudgetBudgetBundle/Resources/public/scdatetimepicker/js/bootstrap-datetimepicker.min.js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    
    {% javascripts '@BudgetBudgetBundle/Resources/public/jqplot/excanvas.js' %}
        <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="{{ asset_url }}"></script><![endif]-->
    {% endjavascripts %}
    
    {% javascripts '@BudgetBudgetBundle/Resources/public/ring.js/underscore.js'
        '@BudgetBudgetBundle/Resources/public/ring.js/ring.js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    
    {% javascripts '@BudgetBudgetBundle/Resources/public/js/moment.js'
        '@BudgetBudgetBundle/Resources/public/js/category.js' 
        '@BudgetBudgetBundle/Resources/public/js/expense.js'
        '@BudgetBudgetBundle/Resources/public/js/expenseAdd.js'
        '@BudgetBudgetBundle/Resources/public/js/expenseChart.js'
        '@BudgetBudgetBundle/Resources/public/js/expenseGrid.js'
        '@BudgetBudgetBundle/Resources/public/js/expenseTree.js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    
    {% javascripts '@BudgetBudgetBundle/Resources/public/js/moment.js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    
    {% javascripts '@BudgetBudgetBundle/Resources/public/jqplot/jquery.jqplot.min.js'
        '@BudgetBudgetBundle/Resources/public/jqplot/plugins/jqplot.dateAxisRenderer.min.js'
        '@BudgetBudgetBundle/Resources/public/jqplot/plugins/jqplot.canvasTextRenderer.min.js'
        '@BudgetBudgetBundle/Resources/public/jqplot/plugins/jqplot.canvasAxisTickRenderer.min.js'
        '@BudgetBudgetBundle/Resources/public/jqplot/plugins/jqplot.categoryAxisRenderer.min.js'
        '@BudgetBudgetBundle/Resources/public/jqplot/plugins/jqplot.barRenderer.min.js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
    
    {% javascripts '@BudgetBudgetBundle/Resources/public/dist-jstree/jstree.min.js' %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
     
    <script type="text/javascript">
        $( document ).ready(function() {
            var options = {
                url: '{{ path("BudgetBudgetBundle_expenses_categories_tree_json") }}',
                url_del: '{{ path('BudgetBudgetBundle_categories_del') }}',
                url_rename: '{{ path('BudgetBudgetBundle_categories_rename') }}',
                url_data: '{{ path('BudgetBudgetBundle_expenses_data_chart') }}'
            }
            var chart = new expenseChart();
            expenseTree.treeCategory(options, chart, 'chart');
            expense.selectMonth('{{ path('BudgetBudgetBundle_expenses_data_chart') }}', chart);
            
            chart.refresh('chart1', null, '{{ path('BudgetBudgetBundle_expenses_data_chart') }}');
        }); 
    </script>
{% endblock %}

{% block home_content %}

<div class="container">
    <div class="row">
        <div class="col-sm-3">
            <div class="panel panel-default">
                <div class="panel-heading"> 
                  <h3 class="panel-title">Category</h3>
                </div>
                <div class="panel-body"> 
                  <div id="tree-category"></div>
                  <div>
                  </div>
                </div>
            </div>
        </div>
        <div class="col-sm-9">    
            <div class="panel panel-default">
                <div class="panel-heading"> 
                  <h3 class="panel-title">Select period</h3>
                </div>
                <div class="panel-body">   
                    <div class="row">
                        <div class="col-md-4">
                            Date From:          
                        </div> 
                        <div class="col-md-2">
                        </div>
                        <div class="col-md-4">
                            Date To:
                        </div> 
                    </div> 
                    <div class="row">
                        <div class="col-md-4">
                            <span class="glyphicon glyphicon-chevron-left select-month-left" style="margin:0 5px; cursor: pointer;"></span>
                            <input type="text" id="select-month-from" readonly>
                            <span class="glyphicon glyphicon-chevron-right select-month-right" style="cursor: pointer;"></span>                       
                        </div> 
                        <div class="col-md-4">
                        <div class="col-md-2">
                            <div class="small-ajax-loader"></div>
                        </div>
                            <span class="glyphicon glyphicon-chevron-left select-month-left" style="margin:0 5px; cursor: pointer;"></span>
                            <input type="text" id="select-month-to" readonly>
                            <span class="glyphicon glyphicon-chevron-right select-month-right" style="cursor: pointer;"></span>                       
                        </div> 
                    </div>  
                </div>
            </div>     

            {% include 'BudgetBudgetBundle:Expense:chart.html.twig' %}     
        </div>

    </div>
</div>
    
{% endblock %}                   
            
                

